<template>
  <div class="bg">
    <Banner></Banner>
    <div class="main-item">
      <div class="left-banner">
        <!--      Vue中借助router-link标签实现路由的切换-->
        <router-link class="link" active-class="active" to="/about">About</router-link>
        <router-link class="link" active-class="active" to="/home">Home</router-link>
      </div>
      <div class="right-content">
        <!--      指定组件的呈现位置-->
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import Banner from "@/components/Banner";
export default {
  name: "App",
  components: {Banner},
  data(){
    return{
      isBg:true
    }
  }
}
</script>

<style scoped lang="less">
 .bg{
   margin: 50px 200px;
   .main-item{
     display: flex;
   }
   .left-banner{
     height: 100px;
     width: 100px;
     display: flex;
     flex-direction: column;
     .link{
       text-decoration: none;
       color: black;
       cursor: pointer;
       border-top: 1px solid #ccc;
       border-left: 1px solid #ccc;
       border-right: 1px solid #ccc;
       flex: 1;
       text-align: center;
       justify-content: center;
       line-height: 50px;
       &:first-child{
         border-radius: 4px 4px 0 0;
       }
       &:last-child{
         border-bottom: 1px solid #ccc;
         border-radius:  0 0 4px 4px;
       }
       /*&:focus{
         background-color: #286090;
         color: #fff;
       }*/

     }
     .active{
       background-color: #337ab7;
       color: #fff;
     }
   }
   .right-content{
     margin-left: 100px;
   }
 }

</style>


